<template>
	<view>
    <uni-section title="报修申请" type="line">
      <view class="example">
        <!-- 基础表单校验 -->
        <uni-forms ref="validForm" label-position="top" :rules="rules" :modelValue="repairData">
          <uni-forms-item label="报修人" required name="repairApplicantName">
            <uni-easyinput v-model="repairData.repairApplicantName" placeholder="请输入姓名" :inputBorder="false"/>
          </uni-forms-item>
          <uni-forms-item label="报修人电话" required name="repairApplicantPhone" >
            <uni-easyinput v-model="repairData.repairApplicantPhone" placeholder="请输入报修人电话" :inputBorder="false" />
          </uni-forms-item>
          <uni-forms-item label="设备" required name="deviceName">
            <uni-list-item :note="repairData.deviceName?'':'请选择设备'" showArrow :title="repairData.deviceName" :border="false" :clickable="true" @click="selectDevice"/>
          </uni-forms-item>
          <uni-forms-item label="设备类型" required name="deviceType">
            <uni-easyinput v-model="repairData.deviceType" placeholder="请输入设备类型" :inputBorder="false"/>
          </uni-forms-item>
          <uni-forms-item label="学校" required name="school">
            <uni-easyinput v-model="repairData.school" placeholder="请输入学校" :inputBorder="false"/>
          </uni-forms-item>
          <uni-forms-item label="报修区域" required name="repairArea">
            <dict-select :value="repairData.repairArea" placeholder="请选择报修区域" dict="报修区域" @change="(item)=>{repairData.repairArea=item}" :inputBorder="false"></dict-select>
          </uni-forms-item>
          <uni-forms-item label="详细位置" required name="detailedLocation">
            <uni-easyinput v-model="repairData.detailedLocation" placeholder="请输入详细位置" :inputBorder="false"/>
          </uni-forms-item>
          <uni-forms-item label="故障类型" required name="faultType">
            <dict-select :value="repairData.faultType" placeholder="请选择故障类型" :dict="faultTypeDictName" @change="(item)=>{repairData.faultType=item}" :inputBorder="false"></dict-select>
          </uni-forms-item>
          <uni-forms-item label="维修等级" required name="repairLevel">
            <dict-select :value="repairData.repairLevel" placeholder="请选择维修级别" dict="维修级别" @change="(item)=>{repairData.repairLevel=item}" :inputBorder="false"></dict-select>
          </uni-forms-item>
          <uni-forms-item label="期望上门维修时间" required name="expectRepairTime">
            <uni-datetime-picker type="datetime" return-type="timestamp" placeholder="请选上门维修时间" v-model="repairData.expectRepairTime" :border="false"/>
          </uni-forms-item>
          <uni-forms-item>
            <file-upload title="故障图片" @change="changeFiles"></file-upload>
          </uni-forms-item>
          <uni-forms-item label="故障描述" name="remark">
            <uni-easyinput type="textarea" v-model="repairData.remark" placeholder="请输入故障描述" :inputBorder="false"/>
          </uni-forms-item>
        </uni-forms>
        <view class="footer">
          <button type="primary" @click="submit('validForm')">提交</button>
        </view>

      </view>
    </uni-section>
	</view>
</template>

<script>
import {RepairOrderService} from "./repairOrderService";
import FileUpload from "../../../components/FileUpload";
import DictSelect from "../../../components/DictSelect";
import { attachmentService } from '../../../../api/attachmentService';
import {DeviceService} from "../../../public/mine/device/deviceService";
import {UserService} from "../../../../api/user";

export default {
    components: {FileUpload,DictSelect},
    data() {
			return {
        files:[],
        repairData:{
          repairApplicantName:"",
          repairApplicantPhone:"",
          school:"",
          repairArea:"",
          detailedLocation:"",
          faultType:"",
          expectRepairTime:"",
          repairLevel:"普通",
          remark:"",
          deviceType:""
        },
        faultTypeDictName:"故障类型",
        // 校验规则
        rules: {
          repairApplicantName: {
            rules: [{
              required: true,
              errorMessage: '姓名不能为空'
            }]
          },
          repairApplicantPhone: {
            rules: [{
              required: true,
              errorMessage: '请输入报修人电话'
            }, {
              format: 'number',
              errorMessage: '电话只能输入数字'
            }]
          },
          deviceName: {
            rules: [{
              required: true,
              errorMessage: '设备不能为空'
            }]
          },
          repairArea: {
            rules: [{
              required: true,
              errorMessage: '报修区域不能为空'
            }]
          },
          detailedLocation: {
            rules: [{
              required: true,
              errorMessage: '详细位置不能为空'
            }]
          },
          faultType: {
            rules: [{
              required: true,
              errorMessage: '故障类型不能为空'
            }]
          },
          expectRepairTime: {
            rules: [{
              required: true,
              errorMessage: '期望上门时间不能为空'
            }]
          },
        },

        deviceCode:""
			}
		},
    created(){
      let user=uni.getStorageSync('userInfo').userInfo
      this.repairData.repairApplicantName=user.nickname;
      this.repairData.repairApplicantPhone=user.phone;
    },
    onLoad(options) {
      // console.log(options.deviceCode)
      this.deviceCode = options.deviceCode;
      if(this.deviceCode){
        this.findDeviceInfo();
      }
    },
  // onShow(){
  //   console.log("show",this.deviceCode,this.repairData)
  // },
  watch:{
    deviceCode: {
      handler(newValue, oldValue) {
        console.log("数据更新",newValue)
        if(newValue){
          this.findDeviceInfo()
        }
      },
      deep: true
    },
    'repairData.deviceType': {
      handler () {
        this.faultTypeDictName="设备类型."+this.repairData.deviceType+".故障类型"
        console.log(this.faultTypeDictName)
      }
    },
  },
		methods: {
      submit(ref) {
        // console.log(this.repairData,ref)
        let _this=this
        this.$refs[ref].validate().then(res => {
          this.repairData.currentState=0;
          uni.requestSubscribeMessage({
            tmplIds: ["UUnZAs7HFZSNScTJqWzsBc7XafcKSie_4CDn68bHsU8"],
            success (res) {
              console.log(res);
              if(res["UUnZAs7HFZSNScTJqWzsBc7XafcKSie_4CDn68bHsU8"]=='accept'){
                RepairOrderService.saveRepairOrder(_this.repairData).then(res=>{
                  if(res.statusCode===200){
                    uni.showToast({
                      title: `操作成功`
                    })
                    if(res.data.eid){
                      attachmentService.uploadFiles(_this.files,res.data.eid,'repairOrder');
                    }
                    _this.back()
                  }
                })
              }
            }
          })
        }).catch(err => {
          console.log('err', err);
        })
      },
      changeFiles(items){
        this.files = items
      },
      selectDevice(){
        console.log("cur",this.deviceCode)
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/public/mine/device/index?type='+"select"
        })
      },
      findDeviceInfo(){
        DeviceService.findDeviceByCode(this.deviceCode).then(res=>{
          this.setParams(res.data);
        })
      },
      setParams(deviceInfo){
        this.repairData.repairArea=deviceInfo.area;
        this.repairData.school=deviceInfo.useOrganization;
        this.repairData.detailedLocation=deviceInfo.location;
        this.repairData.deviceName=deviceInfo.name;
        this.repairData.deviceType=deviceInfo.type;
        this.repairData.deviceId=deviceInfo.eid;
        this.$forceUpdate()
      },
      back(){
        let pages = getCurrentPages(); // 当前页面
        let beforePage = pages[pages.length - 2]; // 上一页
        if (beforePage.$vm.$refs.userIndex) {
          beforePage.$vm.$refs.userIndex.refreshIfNeeded = true;
        }
        uni.navigateBack({
          delta:1,//返回层数，2则上上页
        })
      }
		}
	}
</script>

<style>
.example{
  width: 90%;
  margin: auto;
}
.uni-forms-item__label{
  width: 100%!important;
  padding: 0!important;
  /*display: none!important;*/
}
.uni-forms-item{
  margin-bottom: 20rpx!important;
}
.footer{
  margin: 20rpx;
}

</style>
